<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>岗位申请审批</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<link rel="stylesheet" href="css/public.css" media="all">
	<style type="text/css">
		.layui-table-cell {
			height: auto;
			line-height: 28px;
		}
	</style>
</head>
<body>

<div class="layui-tab layui-tab-card" lay-filter="tab1">
	<ul class="layui-tab-title">
		<li class="layui-this">未审批</li>
		<li>已通过</li>
		<li>未通过</li>
	</ul>
	<div class="layui-tab-content" style="height: auto; background-color: white">
		<div class="layui-tab-item layui-show">
			<div class="layuimini-container">
				<div class="layuimini-main">
					<fieldset class="table-search-fieldset">
						<legend>搜索信息</legend>
						<div style="margin: 10px 10px 10px 10px">
							<form class="layui-form layui-form-pane" action="">
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">申请人</label>
										<div class="layui-input-inline">
											<input type="text" name="name" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">岗位名称</label>
										<div class="layui-input-inline">
											<input type="text" name="p_title" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-inline">
										<label class="layui-form-label">申请时间</label>
										<div class="layui-input-inline">
											<input type="text" name="time" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-inline">
										<button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
									</div>
								</div>
							</form>
						</div>
					</fieldset>
					<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter" ></table>

					<script type="text/html" id="currentTableBar">
						<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="approval">审批</a>
					</script>

				</div>
			</div>
		</div>
	</div>
</div>

<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jquery-3.6.3.js"></script>
<script>

	layui.use(['form', 'table','element'], function () {
		var $ = layui.jquery,
				form = layui.form,
				table = layui.table,
				element = layui.element;

		function changeTable(path,cols1){
			table.render({
				elem: '#currentTableId',
				url: path,
				toolbar: '#toolbarDemo',
				even: true,
				defaultToolbar: ['filter', 'exports', 'print', {
					title: '提示',
					layEvent: 'LAYTABLE_TIPS',
					icon: 'layui-icon-tips'
				}],
				cols: cols1,
				limits: [10, 15, 20, 25, 50],
				limit: 10,
				page: true,
				parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
					var result;
					if (this.page.curr) {
						result = res.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
					}
					else {
						result = res.slice(0, this.limit);
					}
					return {
						"code": 0, //解析接口状态
						"msg": '', //解析提示文本
						"count": res.length, //解析数据长度
						"data": result //解析数据列表
					};
				}
			});
		}

		/*
		用于切换选项卡，列出不同审核状态的申请记录
		 */
		var path = '/ListZpApplication?state='+ 0;
		var NowPage = 0;  //记录当前选项卡的位置，默认第一页
		var tool = {title: '操作', minWidth: 200,toolbar: '#currentTableBar', align: "center",hide:false};
		var cols1=[
			[
				{field: 'a_id', width: 100,title: '编号', sort: true,align:"center"},
				{field: 'department', width: 200, title: '单位名称',align:"center"},
				{field: 'p_title', width: 150,title: '岗位名称',align:"center"},
				{field: 'name', width: 150, title: '申请人',align:"center"},
				{field: 'note', width: 200,title: '申请信息',align:"center"},
				{field: 'state', width: 200, title: '状态',align:"center", templet: function (d) {
						if(d.state == "审核中"){
							return '<span style="color:#007DDB;">' + d.state + '</span>'
						}
						if (d.state == "未通过") {
							return '<span style="color:#eb7350;">' + d.state + '</span>'
						}
						if (d.state == "已通过") {
							return '<span style="color:green;">' + d.state + '</span>'
						}
					}},
				{field: 'time', width: 200,title: '申请时间',sort: true,align:"center"},tool
			]
		];
		changeTable(path,cols1);
		//切换选项卡，查看不同状态的申请信息
		element.on('tab(tab1)', function(data){
			var a ;
			if (data.index == 0){
				a = data.index;
				NowPage = data.index;
				tool = {title: '操作', minWidth: 200,toolbar: '#currentTableBar', align: "center",hide:false};
				cols1[0][0].width=100;
				cols1[0][1].width=200;
				cols1[0][2].width=150;
				cols1[0][3].width=150;
				cols1[0][4].width=200;
				cols1[0][5].width=200;
				cols1[0][6].width=200;
				cols1[0][7]=tool;
			}
			if (data.index == 1){
				NowPage = data.index;
				a = data.index;
				tool = {};
				cols1[0][0].width=150;
				cols1[0][1].width=250;
				cols1[0][2].width=200;
				cols1[0][3].width=200;
				cols1[0][4].width=250;
				cols1[0][5].width=250;
				cols1[0][6].width=250;
				cols1[0][7]=tool;
			}
			if (data.index == 2){
				a = data.index;
				NowPage = data.index;
				tool = {};
				cols1[0][0].width=150;
				cols1[0][1].width=250;
				cols1[0][2].width=200;
				cols1[0][3].width=200;
				cols1[0][4].width=250;
				cols1[0][5].width=250;
				cols1[0][6].width=250;
				cols1[0][7]=tool;
			}
			path = '/ListZpApplication?state='+a;
			changeTable(path,cols1);
		});


		// 监听搜索操作
		form.on('submit(data-search-btn)', function (data) {
			//JSON.stringify(data.field)
			var user = {};
			//执行搜索重载
			table.reload('currentTableId', {
				data:user,
				method:'post',
				url:'/ZpDifferenceApplicationSearch?state='+ NowPage,
				contentType:'application/json;charset=utf-8',
				page: {
					curr:1
				},
				where:data.field
			}, 'data');

			return false;
		});


		//监听审批
		table.on('tool(currentTableFilter)', function (obj) {
			var data1 = obj.data;
			if (obj.event === 'approval') {
				var index = layer.open({
					title:false,
					type: 2,
					shade: 0.2,
					maxmin: false,
					shadeClose: true,
					area: ['400px', '250px'],
					content: '/toZpApplicationDetail?id=' + data1.a_id,
				});
				$(window).on("resize", function () {
					layer.full(index);
				});
				return false;
			}
		})

	});
</script>

</body>
</html>